<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="css/mui.css" rel="stylesheet"/>
</head>

<body>
<div class="mui-content">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a id="link_myface" href="javascript:;">
                <span class="mui-pull-right mui-icon mui-icon-arrowright"
                      style="line-height: 42px;color: lightgray;margin-left: 3px;"></span>
                <img id="img_my_face" class="mui-media-object mui-pull-right" src="image/face-default-cat.png">
                <div class="mui-media-body" style="line-height: 42px;font-size: 16px;">
                    头像
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <span class="mui-pull-right mui-icon mui-icon-arrowright"
                      style="color: lightgray;margin-left: 3px;"></span>
                <span id="span_nickname" class="mui-pull-right"
                      style="color: gray;font-size: 14px;">慕课网</span>
                <div class="mui-media-body">
                    昵称
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
						<span id="span_username" class="mui-pull-right"
                              style="color: gray;font-size: 14px;">慕课网</span>
                <div class="mui-media-body">
                    账号
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <span class="mui-pull-right mui-icon mui-icon-arrowright"
                      style="color: lightgray;margin-left: 3px;"></span>
                <img class="mui-media-object mui-pull-right" src="image/qrcode.png"
                     style="height: 20px;max-width: 20px;">
                <div class="mui-media-body">
                    我的二维码
                </div>
            </a>
        </li>
    </ul>
    <br/>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media"
            style="text-align: center;">
            <a id="link_logout" href="javascript:;">
                <div class="mui-media-body">
                    退出登录
                </div>
            </a>
        </li>
    </ul>
</div>
<script src="js/mui.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
    mui.init()

    mui.plusReady(function () {

        // 获得当前的webview，刷新当前用户信息
        var meWebview = plus.webview.currentWebview();
        meWebview.addEventListener("show", function () {
            refreshUserInfo();
        });

        // 页面跳转，我的头像
        var link_myface = document.getElementById("link_myface");
        link_myface.addEventListener("tap", function () {
            mui.openWindow("myface.html", "myface.html");
        });
    });

    function refreshUserInfo() {
        var user = app.getUserGlobalInfo();
        console.log(JSON.stringify(user));

        if (user != null) {
            var faceImage = user.faceImage;
            var nickname = user.nickname;
            var username = user.username;

            var span_nickname = document.getElementById("span_nickname");
            var span_username = document.getElementById("span_username");

            span_nickname.innerHTML = nickname;
            span_username.innerHTML = username;

            if (app.isNotNull(faceImage)) {
                var img_my_face = document.getElementById("img_my_face");
                img_my_face.src = app.imgServerUrl + faceImage;
            }
        }
    }
</script>
</body>

</html>
